<template>
  <v-div class="v-span" v-if="tIcon||lIcon||rIcon||bIcon" :direction="direction" :style="style">
    <i v-if="tIcon" :class="tIcon"></i>
    <i v-if="lIcon" :class="lIcon"></i>
    <span :style="textStyle">
    <slot></slot>
  </span>
    <i v-if="rIcon" :class="rIcon"></i>
    <i v-if="bIcon" :class="bIcon"></i>
  </v-div>
  <span v-else class="v-span" :style="style+textStyle">
    <slot></slot>
  </span>
</template>
<script>
  import view from './view.js'
  import text from './text.js'

  export default {
    name: 'v-text',
    componentName: 'v-text',
    mixins: [view, text],
    props: {
      desc: {
        type: String,
        default: 'v-text'
      },
      tIcon: {
        type: String,
        default: ''
      },
      lIcon: {
        type: String,
        default: ''
      },
      rIcon: {
        type: String,
        default: ''
      },
      bIcon: {
        type: String,
        default: ''
      }
    },
    install: function (Vue) {
      Vue.component('v-text', this)

    },
    computed: {
      style () {
        console.log(this.$props.visible)
        let prop = view.getStyle(this.$props)
        console.log(prop)
        return prop
      },
      textStyle () {
        let textProp = text.getTextStyle(this.$props)
        console.log(textProp)
        return textProp
      }
    }
  }

</script>
